import React, { memo } from "react";
import { useSelector } from "react-redux";

import "./index.scss";
import WYThemeHeaderNormal from "components/theme-header-normal";
import WYRadioRecommendCover from "components/radio-recommend-cover";

const WYRadioRecommend = memo(function (props) {
  const recommends = useSelector((state) =>
    state.getIn(["djradio", "recommends"])
  );

  return (
    <div className="wy-radio-recommend">
      <WYThemeHeaderNormal title="优秀新电台" />
      <div className="radio-item">
        {recommends.length > 0 &&
          recommends.map((item) => (
            <WYRadioRecommendCover key={item.id} info={item} />
          ))}
      </div>
    </div>
  );
});

export default WYRadioRecommend;
